import React, { Component } from 'react'
import PubSub from 'pubsub-js'
export default class list extends Component {
    state = {
        users:[],//初始化数组
        isFirst:true, //第一次打开
        isloding:false, //是否处于加载中
        err:'' //存储相关的错误信息
    }
    componentDidMount(){
        // 订阅消息 PubSub.subscribe()
        this.token = PubSub.subscribe('atguigu',(_,stateObj)=>this.setState(stateObj))
    }
    componentWillUnmount(){
        // 组件将要卸载
        PubSub.unsubscribe(this.token)
    }
    render() {
        let {users,isFirst,isloding,err} = this.state
        return (
            <div>
                {
                    isFirst ? <h2>欢迎搜索</h2> :
                    isloding ? <h2>加载中</h2> :
                    err ? <h2>{err}</h2> : 
                    users.map(v => {
                      return (
                          <div key={v.id} className="card">
                              <a rel="noreferrer" href={v.html_url} target="_blank">
                                  <img src={v.avatar_url} alt="" />
                              </a>
                              <p>{v.login}</p>
                          </div>
                      )  
                    })
                }
            </div>
        )
    }
}
